@using FluentBlog.Models
@model FluentBlog.ViewModels.ArchiveViewModel

@section HeadScripts{
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/editor.md/css/editormd.preview.min.css" />
        <script src="~/lib/editor.md/editormd.min.js"></script>
        <script src="~/lib/editor.md/lib/marked.min.js"></script>
        <script src="~/lib/editor.md/lib/prettify.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
    </environment>

    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yremp/editormd/css/editormd.preview.min.css" />
        <script src="https://cdn.jsdelivr.net/gh/yremp/editormd/editormd.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/yremp/editormd/lib/marked.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/yremp/editormd/lib/prettify.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
    </environment>

    <script>
        function updateCommentsCount() {
            $.ajax({
                url: '@Url.Action("UpdateCommentsCount", "Home")',
                type: 'GET',
                dataType: 'json',
                cache: false,
                data: { url: window.location.pathname },
                success: function(count) {
                    if (count !== -1) {
                        $(`#comments-count`).text(count);
                    }
                }
            });
        }
    </script>
}



<div class="view">
    @if (string.IsNullOrEmpty(Model.Archive.TitleImage))
    {
        Model.Archive.TitleImage = Url.Content(Model.DefaultTitleImage);
    }
    <img src=@Model.Archive.TitleImage class="img-fluid card-img-top" alt="photo">
</div>

<div class="card mb-4 shadow">
    <!--主体-->
    <div class="card-body">
        <!--标题-->
        <h3 class="card-title font-weight-bold mb-2 pl-3">
            @{
                @Model.Archive.Title
            }
        </h3>
        <hr>
        <div class="pl-3">
            @{
                for (int i = 0; i < Model.Categories.Count; i++)
                {
                    <span class="pl-0 pr-2 m-0">
                        <a class="btn btn-sm m-0 py-0 @Model.CategoryColors[i % 5]" asp-controller="Home" asp-action="Index" asp-route-slug="@Model.Categories[i].Slug">@Model.Categories[i].Name</a>
                    </span>
                }
            }
        </div>
        <hr>
        <!-- 文章信息 -->
        <div class="bg-transparent d-flex justify-content-around">
            <span class="text-muted">
                <i class="mi mi-Contact" data-toggle="tooltip" data-placement="top" title="作者"></i> @Model.Author.DisplayName
            </span>
            <span class="text-muted">
                <i class="mi mi-Calendar" data-toggle="tooltip" data-placement="top" title="发表日期"></i> @Model.Archive.Created.ToShortDateString()
            </span>
            <span class="text-muted">
                <i class="mi mi-View" data-toggle="tooltip" data-placement="top" title="阅读次数"></i> @Model.Archive.Views
            </span>
            <span class="text-muted">
                <i class="mi mi-Comment" data-toggle="tooltip" data-placement="top" title="评论数"></i>
                <span id="comments-count">@Model.Archive.CommentsNum</span>
            </span>
        </div>
        <hr>

        <!--正文-->
        <div id="description" class="font-weight-normal">
            <!--加载动画-->
            <div class="progress-cover progress-cover-primary" id="progress-cover">
                <br />
                <br />
                <div class="progress progress-medium fluent-position">
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                </div>
                <br />
                <br />
            </div>
            <!--正文-->
            <textarea class="d-none">@Model.Archive.Text</textarea>

        </div>
        <!-- 文章页尾 -->
        <div class="card-footer bg-transparent justify-content-around mt-3">
            <!-- 打赏 -->
            @if (ViewBag.Settings["DonateSwitch"] == "on")
            {
                <div class="text-center">
                    <a class="btn btn-primary" data-toggle="collapse" href="#donate">
                        <i class="mi mi-PaymentCard"></i> 赞赏
                    </a>
                </div>
                <div class="collapse" id="donate">
                    <div class="m-3 row text-center">
                        @if (!string.IsNullOrEmpty(ViewBag.Settings["DonateAlipay"]))
                        {
                            <div class="col-md text-center">
                                <img class="donate-qrcode" src="@ViewBag.Settings["DonateAlipay"]" alt="支付宝" />
                            </div>
                        }
                        @if (!string.IsNullOrEmpty(ViewBag.Settings["DonateWechat"]))
                        {
                            <div class="col-md text-center">
                                <img class="donate-qrcode" src="@ViewBag.Settings["DonateWechat"]" alt="微信" />
                            </div>
                        }
                    </div>
                </div>
            }
            <!-- 版权说明 -->
            <p class="py-2">
                版权说明：若无另外注明，博客中文章皆为原创，转载请保留文章出处<br>
                本文原址：<a href="@Model.Url">@Model.Url</a>
            </p>
        </div>
    </div>
</div>

<!-- 评论区 -->
<div class="card mb-4 shadow">
    <div class="card-body">
        <div id="vcomments" class="font-weight-normal"></div>
    </div>
</div>

@section SecondSidebar{
    <!-- 文章目录 -->
    <div class="card shadow mb-4 p-3" id="catalog">
        <div class="card-header bg-white px-1 py-2 mb-2">
            <h5 class="font-weight-normal"><i class="mi mi-AllApps"></i> 文章目录</h5>
        </div>
        <!--markdown toc-->
        <div class="markdown-body editormd-preview-container small p-1" id="toc-container">
            <!--加载动画-->
            <div class="progress-cover progress-cover-primary">
                <br />
                <br />
                <div class="progress progress-medium fluent-position">
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                    <span class="progress-span"></span>
                </div>
                <br />
                <br />
            </div>
        </div>
    </div>

    <!-- 文章标签 -->
    @if (Model.Tags.Count != 0)
    {
        <div class="card shadow mb-4 p-3">
            <div class="card-header bg-white px-1 py-2">
                <h5 class="font-weight-normal"><i class="mi mi-Tag"></i> 文章标签</h5>
            </div>
            <div class="card-body p-2">
                @foreach (var m in Model.Tags)
                {
                    <a class="small" asp-controller="Home" asp-action="Index" asp-route-slug="@m.Slug"> #@m.Name </a>
                }
            </div>
        </div>
    }
    <!-- 热门文章 -->
    @await Component.InvokeAsync("TopArchivesBlock")
}

@section BottomScripts{
    <script type="text/javascript">
        $(function () {
            // 解析markdown
            var editormdView = editormd.markdownToHTML("description",
                {
                    path: "https://cdn.jsdelivr.net/npm/editor.md@1.5.0/lib/",
                    htmlDecode: true,
                    tocStartLevel: 2,
                    tocContainer: "#toc-container",
                    tocDropdown: false
                });
            $('.progress-cover').addClass('d-none');
            // 如无目录则隐藏目录
            if ($('.markdown-toc-list').has('li').length === 0) {
                $('#catalog').addClass('d-none');
            }
            // 评论区
            new Valine({
                el: '#vcomments',
                appId: '@ViewBag.Settings["LeanCloudAppID"]',
                appKey: '@ViewBag.Settings["LeanCloudAppKey"]',
                placeholder: '快来发表你的评论吧'
            });
            // 发表新评论时更新文章的评论数
            $('.vnum').bind('DOMNodeInserted', updateCommentsCount);
        });
    </script>
}